<div class="wrapper">
    <div>
        <div class="box box-top">
            <!-- /.box-header -->
            <!-- form start -->
            <form id="iconForm" role="form" action="${base}/admin/icon/save" method="post">
                <input type="hidden" name="id" value="${(icon.id)!}">
                <div class="box-body">
                            <div class="form-group">
                                <label for="name">Name</label>
                                <input type="text" value="${(icon.name)!}" class="form-control" name="name" id="name">
                            </div>

                            <div class="form-group">
                                <label for="catagory">Catagory</label>
                                <select class="form-control select2" style="width: 100%;" id="catagory" name="catagory">
                                    <#list catagorys as catagory>
                                    <option <#if (catagory.name)! == (icon.catagory)!> selected="selected"</#if> value="${(catagory.name)!}">${(catagory.name)!}</option>
                                    </#list>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>Photo-Icon</label>
                                <div class="row">

                                    <div class="col-xs-2" style="width: 12%;">
                                        <input type="file" id="exampleInputFile1" multiple="multiple">
                                    </div>
                                    <div class="col-xs-2" style="margin-left: 150px;">
                                        <input type="button" value="upload" onclick="pushImg1()">
                                    </div>
                                </div>
                                <input type="hidden" value="${(icon.icon)!}"  class="form-control" name="icon" id="annex1">
                            </div>

                    <div class="timeline-body" >
                        <img src="${base}${(icon.icon)!'/fileUpload/placeholder.jpg'}" style="width: 50px;height: 50px;" alt="..." id="titleImage1" class="margin">
                    </div>
                            <div class="form-group">
                                <label>Photo-Svg</label>
                                <div class="row">

                                    <div class="col-xs-2" style="width: 12%;">
                                        <input type="file" id="exampleInputFile" multiple="multiple">
                                    </div>
                                    <div class="col-xs-2" style="margin-left: 150px;">
                                        <input type="button" value="upload" onclick="pushImg()">
                                    </div>
                                </div>
                                <input type="hidden" value="${(icon.photo)!}"  class="form-control" name="photo" id="annex">
                            </div>
                            <div class="timeline-body" >
                                <img src="${base}${(icon.photo)!'/fileUpload/placeholder.jpg'}" style="width: 50px;height: 50px;" alt="..." id="titleImage" class="margin">
                            </div>
                            <div class="form-group">
                                <label for="status">Status</label>
                                <input type="text" value="${(icon.status)!}" class="form-control" name="status" id="status">
                            </div>

                            <div class="form-group">
                                <label for="valid">Valid</label>
                                <select  name="valid" id="valid" class="form-control">
                                    <option value="true" <#if ((icon.valid)!true)==true> selected="selected" </#if>>----Valid----</option>
                                    <option value="false" <#if ((icon.valid)!true)==false> selected="selected" </#if>>----InValid----</option>
                                </select>
                            </div>

                    <div class="box-footer">
                        <button type="button" onclick="$('#iconForm').submit();" class="btn btn-primary">Save
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $("#iconForm").validate({
            submitHandler:function(form){
                submitIcon();
            }
        });
    });
    function submitIcon(){
        HF.ajaxFormSubmit('iconForm',function(result){
            alert("Save Suncess");
            document.location.reload();
        },function(e){ alert("Save Failure");});
    }
    function pushImg(obj) {
        var url = '${base}'+ "/admin/icon/titleImgeUpload"; //访问控制器是upload，后面必须加'/'否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
        var files = $("#exampleInputFile").get(0).files[0]; //获取file控件中的内容

        var fd = new FormData();
        fd.append("uploadFile", files);
        $.ajax({
            type: "POST",
            contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            url: url,
            data: fd,
            success: function (msg) {

                var obj = eval('(' + JSON.stringify(msg) + ')');
                if(obj.SUCESS){
                    //填充图片
                    $("#titleImage").attr("src", '${base}'+obj.DATA);
                    $("#titleImage").css("width","150");
                    $("#titleImage").css("height","100");
                    //写入隐藏域
                    $("#annex").val(obj.DATA);
                    alert("upload Success")
                }
            },
            error: function (msg) {
                //debugger;
                alert("error");
            }
        });
    }
    function pushImg1(obj) {
        var url = '${base}'+ "/admin/icon/titleImgeUpload1"; //访问控制器是upload，后面必须加'/'否则会报错"org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.Mult...",但是如果是多级的URL【例如XX/XXX/00/upload/0】又没问题了.
        var files = $("#exampleInputFile1").get(0).files[0]; //获取file控件中的内容

        var fd = new FormData();
        fd.append("uploadFile", files);
        $.ajax({
            type: "POST",
            contentType:false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            url: url,
            data: fd,
            success: function (msg) {

                var obj = eval('(' + JSON.stringify(msg) + ')');
                if(obj.SUCESS){
                    //填充图片
                    $("#titleImage1").attr("src", '${base}'+obj.DATA);
                    $("#titleImage1").css("width","150");
                    $("#titleImage1").css("height","100");
                    //写入隐藏域
                    $("#annex1").val(obj.DATA);
                    $("#titleImage").attr("src", '${base}'+obj.SVGDATA);
                    $("#titleImage").css("width","150");
                    $("#titleImage").css("height","100");
                    //写入隐藏域
                    $("#annex").val(obj.SVGDATA);
                    alert("upload Success")
                }
            },
            error: function (msg) {
                //debugger;
                alert("error");
            }
        });
    }
</script>
